<template>
  <div v-loading="loading" element-loading-text="正在支付中...请稍等">
    <div class="contain">
      <div @click="router.push('/address')" class="addaddress">新增地址</div>
      <div v-if="addresslist[0]">
        <div class="titlebox">确认地址</div>
        <div class="wk">
          <el-radio-group
            v-model="radio1"
            class="ml-4"
            :change="Changeaddress()"
          >
            <div
              v-for="(item, index) in addresslist"
              :key="item.id"
              class="addressbox"
            >
              <el-radio :label="index + 1" size="larger"></el-radio>
              <span> {{ " " + item.address }}&nbsp;&nbsp;</span
              ><span>{{ item.detail }}&nbsp;&nbsp;</span
              ><span>{{ item.name }}&nbsp;（收）&nbsp;&nbsp;</span
              ><span>{{ item.phone }}&nbsp;&nbsp;&nbsp;&nbsp;</span>
            </div>
          </el-radio-group>
        </div>
      </div>
      <div class="titlebox">确认订单信息</div>
      <div v-for="item in orderproduct" :key="item" class="orderitem">
        <img
          :src="`http://localhost:3001/${item.product_picture}`"
          class="img"
        />
        <div>{{ item.product_name }}</div>
        <div>{{ item.product_price }}</div>
        <div>{{ item.num }}</div>
        <div>{{ item.num * item.product_price }}</div>
      </div>
    </div>
    <div class="totalbox">
      <div class="totalword">实付款：￥{{ total }}</div>
      <div v-if="addresslist[0]">
        <span
          ><span class="word">寄送至:</span
          >{{ " " + selectaddress.address }}&nbsp;&nbsp;</span
        ><span>{{ selectaddress.detail }}&nbsp;&nbsp;</span>
        <div>
          <span class="word">收货人:</span
          ><span>{{ selectaddress.name }}&nbsp;（收）&nbsp;&nbsp;</span
          ><span>{{ selectaddress.phone }}&nbsp;&nbsp;&nbsp;&nbsp;</span>
        </div>
      </div>
      <div class="btn">
        <el-button
          type="primary"
          plain
          v-show="!route.query.ids"
          @click="gocart"
          >返回购物车</el-button
        >
        <el-button type="danger" @click="pay">结算</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import {
  getaddressApi,
  productdetailsApi,
  insertorderApi,
} from "../../api/goods";
import { onMounted, ref } from "vue";

const loading = ref(false);
const route = useRoute();
const router = useRouter();
const store = useStore();
const radio1 = ref(1);
const orderproduct = ref([]);
const total = ref();
let selectaddress = ref();

let addresslist = ref([]);
const getaddress = async () => {
  let data = await getaddressApi(store.state.user.user_id);
  if ((data.code == "002")) {
  } else {
    addresslist.value = data.List;
  }
};
getaddress();
const getorderproduct = async () => {
  let data = await productdetailsApi(route.query.ids);

  orderproduct.value = data.Product;
  orderproduct.value[0].num = route.query.number;
  total.value = orderproduct.value[0].num * orderproduct.value[0].product_price;
};
const a = (e) => {
  return `http://localhost:3001/${e.img}`;
};
onMounted(() => {
  if (route.query.ids) {
    getorderproduct();
  } else {
    let data = JSON.parse(route.query.order);

    data.forEach(async (item) => {
      let data1 = await productdetailsApi(item.id);
      data1.Product[0].num = item.num;
      data1.Product[0].product_price = item.price;
      orderproduct.value.push(JSON.parse(JSON.stringify(data1.Product[0])));
    });
    total.value = route.query.total;
  }
});
function Changeaddress() {
  selectaddress.value = addresslist.value[radio1.value - 1];
}
Changeaddress();
const gocart = () => {
  router.push({
    path: "/shoppingCart",
    query: {
      product: JSON.stringify(orderproduct.value),
    },
  });
};
const pay = async () => {
  let data = await insertorderApi(store.state.user.user_id, orderproduct.value);

  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    ElMessageBox.alert("支付成功", "", {
      // if you want to disable its autofocus
      // autofocus: false,
      confirmButtonText: "OK",
      callback: (action) => {
        ElMessage({
          type: "success",
          message: `可在订单中查看`,
        });
        router.push({
          path: "/order",
        });
      },
    });
  }, 1000);
};
</script>

<style>
.addressbox {
  margin: 10px;
  font-size: 20px;
  width: 100%;
  padding: 20px;
}
.addressbox:hover {
  background-color: antiquewhite;
}
.titlebox {
  font-size: 25px;
  font-weight: 600;
  padding: 20px;
  border-bottom: 4px solid#F1F1F1;
}
.wk {
  text-align: center;
}
.contain {
  position: relative;
  width: 85%;
  left: 50%;
  transform: translateX(-50%);
  border-bottom: 4px solid#F1F1F1;
}

.img {
  width: 100px;
  height: 100px;
}
.orderitem {
  display: flex;
  justify-content: space-around;
  margin: 50px 20px;
  align-items: center;
}
.totalbox {
  border: 1px solid red;
  width: 600px;
  height: 200px;
  position: relative;
  left: 65%;
  margin: 20px;
  text-align: center;

  padding: 20px;
}
.totalword {
  font-size: 40px;
  font-weight: 600;
  color: #ff5000;
  margin: 20px;
}
.btn {
  position: absolute;
  bottom: 10%;
  right: 10%;
}
.word {
  font-weight: 600;
}
.addaddress{
  border: 1px dashed #a3a2a2;
  padding: 20px;
  margin: 20px;
  color: #918d8d;
  font-size: large;
  }
</style>